<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1030px;
        }
        .list{
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .list-left{
            width: 100px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }
        .list-left-left{
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }
        .list-left-right{
            width: 80px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }
        .list-right{
            float: right;
            margin-top: 5px;
            margin-right: 35px;
        }
        .query{
            width: 1650px;
            height: 100px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .layui-col-md11{
            width: 100%;
        }
        .layui-card-header{
            background-color:rgb(243,243,243);
        }
        .query-top-right{
            float: right;
            margin-right: 20px;
        }
        .layui-form-label{
            width: 120px;
        }
        .layui-form-item .layui-input-inline {
            float: left;
            width: 240px;
            margin-right: 50px;
        }
        .record{
            width: 1650px;
            height: 821px;
            margin-top: 40px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .import{
            margin-left: 1060px;
        }
        #button_ids{
            display: none;
        }
        .layui-table-cell {
            line-height: 47px;
            height: inherit;
        }
        .layui-table-cell>a{
            color:green;
        }
        .layui-table-fixed {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 101;
        }
        div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
        div#rMenu ul li {
            margin: 1px 0;
            padding: 0 5px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #DFDFDF;
        }
        img{
            width: 100px;
            height: 116px;
        }
        .layui-table, .layui-table-view {
            margin: 10px 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <!--用户列表-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">用户列表</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" onclick="refresh()">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
        </div>
    </div>

    <!--筛选查询-->
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询
                    <div class="query-top-right layui-btn" onclick="retrieval()">高级检索</div>
                </div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户账号：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="account" placeholder="请输入用户账号" autocomplete="off" class="layui-input">
                            </div>

                            <label class="layui-form-label">用户昵称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickname" class="layui-input" placeholder="请输入用户昵称"/>
                            </div>

                            <label class="layui-form-label">注册时间：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createDate" id="createDate" class="layui-input" placeholder="请选择注册时间"/>
                            </div>

                            <span style="float: right;margin-right: 20px">
                                <button type="button" class="layui-btn" onclick="search()">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-warm">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--数据列表-->
    <div class="record">
        <!--表-->
        <table id="demoTable" lay-filter="demoTable"></table>
    </div>
    <!--表头样式-->
    <div id="button_ids">
        <i class="layui-icon layui-icon-align-left"></i> 用户数据列表
        <button type="button" class="layui-btn import" onclick="addCoupon()">
            <i class="layui-icon">&#xe62f;</i>赠送优惠券
        </button>
        <button type="button" class="layui-btn" onclick="addJsUser()">
            <i class="layui-icon">&#xe608;</i>添加进思用户
        </button>
    </div>
    <!--表内操作-->
    <div id="button_caozuo" style="display:none" >
        <a alt="查看" title="查看"  lay-event="selectTable">查看</a>
        <a alt="编辑" title="编辑"  lay-event="updateTable">编辑</a>
        <a alt="删除" title="删除"  lay-event="shutdownTable">封停</a>
    </div>
</div>

<input type="hidden" name="userId" id="userId"/>
<p id="title" style="display: none;">用户列表</p>

<script>
    layui.use(['jquery','layer','table','form','laydate'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var table=layui.table;
        var form=layui.form;
        var laydate=layui.laydate;

        var createTime = "";
        var updateDate = "";

        laydate.render({
            elem: '#createDate',
            type: 'datetime',
            trigger: 'click'
        })

        demoTable();

        refresh=function refresh(){
            location.reload();
        }

        retrieval=function retrieval(){
            layer.open({
                type : 2,
                title : "高级检索",
                area : [ '900px', '580px' ],
                shade : 0,
                offset: 'auto',
                content :"user-sample.html",
                btn:['确定','取消'],
                yes: function(index, layero){
                    var child = layero.find('iframe').contents();
                    var userCode= child.find("input[name=userCode]").val();
                    var nickname=child.find("input[name=nickname]").val();
                    var studyDate=child.find("input[name=studyDate]").val();
                    var status=child.find("#status option:selected").val();
                    var consumption=child.find("input[name=studyDate]").val();
                    var createDate=child.find("input[name=createDate]").val();
                    var param = {
                        'userCode':userCode,
                        'nickname':nickname,
                        'studyDate':studyDate,
                        'status':status,
                        'consumption':consumption,
                        'createDate':createDate,
                    }
                    $.ajax({
                        url:"/JsBeforeUser/getJsBeforeUserRetrieval",
                        data:param,
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            demoTable(data.data);
                            layer.close(layer.index);
                        }
                    })
                }
            })
        }

        getTable('','','');

        function getTable(account,nickname,createDate){
            var param={
                'account':account,
                'nickname':nickname,
                'createDate':createDate
            }
            $.ajax({
                url:"/JsBeforeUser/getJsBeforeUser",
                data:param,
                type:"post",
                dataType:"json",
                success:function (data) {
                    demoTable(data.data);
                }
            })
        }

        search=function search(){
            var account=$("input[name=account]").val();
            var nickname=$("input[name=nickname]").val();
            var createDate=$("input[name=createDate]").val();
            getTable(account,nickname,createDate);
        }

        /*表格*/
        function demoTable(data){
            table.render({
                elem:'#demoTable',
                title:"委托书",
                data:data,
                toolbar:'#button_ids',
                limit:10,
                width:1610,
                page:{
                    layout:['count','prev','page','next','limit','skip','refresh'],
                    limits:[10,20,30],
                    first:"首页",
                    last:"尾页",
                },
                cols:[[
                    {type:'checkbox'},
                    {title: '序号',align:'center', templet: function (data) {
                        return data.LAY_INDEX;
                    }},
                    {field:"userCode",title:"用户编号",align:'center',width:180},
                    {field:"account",title:"用户账号",align:'center',width:180},
                    {field:"nickname",title:"用户昵称",align:'center',width:180},
                    {field:"studyDate",title:"学习时长",align:'center',width:180,templet:function(data){
                            return data.studyDate+'分钟';
                        }},
                    {field:"consumption",title:"用户消费总金额",align:'center',width:180,templet:function(data){
                            return data.consumption+'￥';
                        }},
                    {field:"createDate",title:"账号注册时间",align:'center',width:180},
                    {field:"status",title:"状态",align:'center',width:180,templet:function(data){
                            if(data.status==2){
                                return '<input type=\"checkbox\" value="'+data.userId+'" lay-skin=\"switch\" lay-text=\"正常|停用"\ checked lay-filter="switchTest" disabled>';
                            }else if(data.status==5||data.status==3||data.status==4){
                                return '<input type=\"checkbox\" value="'+data.userId+'" lay-skin=\"switch\" lay-text=\"正常|停用" lay-filter="switchTest"\ disabled>';
                            }
                        }},
                    {field:'',title:"操作",align:'center',width:180,toolbar:'#button_caozuo'}
                ]]
            })

            table.on('tool(demoTable)',function (obj) {
                var event = obj.event;
                if (event == "selectTable"){
                    getTime();
                    layer.open({
                        type:2,
                        title:"查看",
                        area:["95%","100%"],
                        scrollbar: false,
                        offset:'auto',
                        btn:["确定","取消"],
                        content:"user-list-tool-select.html",
                        success:function(layero,index){
                            var child = layero.find('iframe').contents();
                            child.find("#userCode").text(obj.data.userCode);
                            child.find("#account").text(obj.data.account);
                            child.find("#nickname").text(obj.data.nickname);
                            child.find("#studyDate").text(obj.data.studyDate);
                            child.find("#consumption").text(obj.data.consumption);
                            child.find("#intention").text(obj.data.intention);
                            child.find("#freestyle").text(obj.data.freestyle);
                            child.find("#idCard").text(obj.data.idCard);
                            child.find("#remarks").text(obj.data.remarks);
                            child.find("#email").text(obj.data.email);
                            child.find("#avatarUrl").attr("src",obj.data.avatarUrl);
                        },
                        end:function (layero, index) {
                            layer.close(index);
                        }
                    });
                }else if (event == "updateTable") {
                    localStorage.setItem("UserStatus",obj.data.status);
                    layer.open({
                        type:2,
                        title:"编辑",
                        area:["800px","500px"],
                        offset: 'auto',
                        btn:["确定","取消"],
                        content:"user-list-tool-update.html",
                        success:function(layero,index){
                            var childUpdate = layero.find('iframe').contents();
                            childUpdate.find("input[name=userCode]").val(obj.data.userCode);
                            childUpdate.find("input[name=nickname]").val(obj.data.nickname);
                            childUpdate.find("input[name=consumption]").val(obj.data.consumption);
                            childUpdate.find("#remarks").val(obj.data.remarks);
                            childUpdate.find("#freestyle").val(obj.data.freestyle);
                        },
                        yes:function( index,layero){
                            var childUpdate = layero.find('iframe').contents();
                            var param = {
                                'userId':obj.data.userId,
                                'nickname':childUpdate.find("input[name=nickname]").val(),
                                'consumption':childUpdate.find("input[name=consumption]").val(),
                                'remarks':childUpdate.find("#remarks").val(),
                                'freestyle':childUpdate.find("#freestyle").val(),
                                'status':childUpdate.find("#status").val(),
                            }
                            $.ajax({
                                url:"/JsBeforeUser/updateJsBeforeUser",
                                data:param,
                                type:'post',
                                dataType:'json',
                                success:function (data) {
                                }
                            })
                            layer.close(index);
                        },
                        btn2:function(index,layero){
                            layer.close(index);
                        },
                        end:function () {
                            getTable("","","");
                        }
                    });
                }else if (event == "shutdownTable") {
                    var child;
                    if(obj.data.status==5){
                        layer.msg("此账号已被封停");
                    }else if(obj.data.status==2){
                        layer.open({
                            type:2,
                            title:"封停用户",
                            area:["700px","500px"],
                            offset: 'auto',
                            btn:["确定","取消"],
                            content:"shut-down-user.html",
                            success:function(layero,index){
                                child = layero.find('iframe').contents();
                                child.find("input[name=account]").val(obj.data.account);
                            },
                            yes:function(index,layero){
                                var param={
                                    'userId':obj.data.userId,
                                    'type':2,
                                    'reason':child.find("#reason").val(),
                                    'startDate':getTime(),
                                    'endDate':getTimes(child.find('#day').val()),
                                    'days': child.find('#day').val(),
                                }
                                $.ajax({
                                    url:"/JsBeforeUser/updateJsBeforeUserStatus",
                                    data:{'status':5,'userId':obj.data.userId},
                                    type:'post',
                                    dataType:'json',
                                    success:function (data) {
                                        $.ajax({
                                            url:"/JsClosure/addshutdowmJsBeforeUser",
                                            data:param,
                                            type:'post',
                                            dataType:'json',
                                            success:function (data) {
                                                getTable("","","");
                                                layer.msg("已封停");
                                                layer.close(index)
                                            }
                                        })
                                    }
                                })
                            },
                            end:function (layero, index) {
                                layer.close(index);
                            }
                        });
                    }
                }
            })
        }

        /*form.on('switch(switchTest)', function(data){
            if(data.elem.checked==true){
                $.ajax({
                    url:"/JsBeforeUser/updateJsBeforeUserStatus",
                    type:"post",
                    dataType:"json",
                    data:{'status':2,'userId':data.value},
                    success:function (data) {
                        getTable('','','');
                        layer.msg("修改成功");
                    }
                })
            }else{
                $.ajax({
                    url:"/JsBeforeUser/updateJsBeforeUserStatus",
                    type:"post",
                    dataType:"json",
                    data:{'status':5,'userId':data.value},
                    success:function (data) {
                        getTable('','','');
                        layer.msg("修改成功");
                    }
                })
            }
        })*/


        addJsUser = function addJsUser() {
            window.location.href="user-add-jinsi-user.html";
        }

        //监听复选框
        arr = [];
        table.on('checkbox(demoTable)', function(obj){
            if(obj.type == 'one'){
                if(obj.checked){
                    arr.push(obj.data.userId);
                }else{
                    for(var i=0; i <arr.length; i++){
                        if(arr[i] == obj.data.userId){
                            var local = $.inArray(arr[i],arr);
                            arr.splice(local,1);
                        }
                    }
                }
            }else if(obj.type=='all'){
                arr = [];
                if(obj.checked){
                    var checkStatus = table.checkStatus('demoTable');
                    $(checkStatus.data).each(function (i, o) {
                        arr.push(o.userId);
                    });
                }else{
                    arr=[];
                }
            }
        });

        addCoupon=function addCoupon(){
            if(arr.length==0){
                layer.msg("请选择一个用户进行赠送！！");
            }else{
                layer.open({
                    type:2,
                    title:"赠送优惠券",
                    area:["1000px","600px"],
                    offset: 'auto',
                    btn:['确定','取消'],
                    content:"give-leading-user-coupon.html",
                    success:function(layero,index){
                        var childUpdate = layero.find('iframe').contents();
                        newarr=[];
                        for(var i=0;i<arr.length;i++){
                            newarr.push(arr[i]);
                        }
                        JSON.stringify(localStorage.setItem("newarr",newarr))
                    },
                    yes:function (layero, index) {
                        $.ajax({
                            url:'/JsUserCoupon/getJsUserCouponById',
                            data:{'couponId':localStorage.getItem("couponId")},
                            type:'post',
                            dataType:'json',
                            success:function (data) {
                                if(data.data.issueQuantity-data.data.used>=arr.length){
                                    for(var i=0;i<arr.length;i++){
                                        var param = {
                                            "couponId":localStorage.getItem("couponId"),
                                            "userId":arr[i],
                                            "getDate":getTime(),
                                            "usedState":2
                                        };
                                        $.ajax({
                                            url:'/JsUserCouponUsed/addJsUserCouponUsed',
                                            data:param,
                                            type:'post',
                                            dataType:'json',
                                            success:function (data) {
                                            }
                                        });
                                    }
                                    $.ajax({
                                        url:'/JsUserCoupon/updateJsUserCouponUsed',
                                        data:{'issueQuantity':arr.length,'couponId':localStorage.getItem("couponId")},
                                        type:'post',
                                        dataType:'json',
                                        success:function (data) {
                                            layer.msg('赠送成功！！！');
                                        }
                                    });
                                }else{
                                    layer.msg("当前优惠券剩余数量不足 无法赠送！！！")
                                }
                            }
                        });
                        layer.close(layer.index);
                    },
                    end:function (layero, index) {
                        layer.close(index);
                    }
                })
            }
        }

        //返回按钮
        $('#goBack').click(function () {
            var title = $('#title').text();
            var iframe = parent.$('.iframe');
            $.each(iframe,function (i,item) {
                if(title == $(item).attr('_href')){
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });

        //现在时间
        function getTime(){
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var minute=date.getMinutes();
            var second=date.getSeconds();
            var dateStr = year+"-"+zeroFilling(month)+"-"+zeroFilling(day)+" "+zeroFilling(hour)+":"+zeroFilling(minute)+":"+zeroFilling(second);
            return dateStr;
        }
        function zeroFilling(data){
            if(data<10){
                data="0"+data;
            }
            return data;
        }

        function getTimes(days){
            var oldDate=new Date();
            var date=new Date(oldDate.setDate(oldDate.getDate()+parseInt(days)));
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var minute=date.getMinutes();
            var second=date.getSeconds();
            var dateStr = year+"-"+zeroFilling(month)+"-"+zeroFilling(day)+" "+zeroFilling(hour)+":"+zeroFilling(minute)+":"+zeroFilling(second);
            return dateStr;
        }

    })

</script>
</body>
</html>